<template>
  <q-card flat>
    <q-card-section class="flex items-center">
      <q-icon name="stars" size="sm" color="grey-9" class="q-mr-sm" />
      <div class="text-body1 text-bold">数据概览</div>
    </q-card-section>

    <q-separator />

    <q-card-section class="row justify-between">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6  q-pa-xs" v-for="(item, idx) in dataMap" :key="idx">
        <div class="bg-grey-2 q-pa-sm">
          <div class="text-grey-7 q-pb-sm text-bold flex justify-start items-center">
            <div>{{item.title}}</div>
          </div>
          <div class="q-px-sm text-center ">
            <span class="text-h4" :class="item.color">{{flopData[item.name] || 0}}</span><span class="text-grey-7 q-ml-sm">{{item.unit}}</span>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'flopMBoard',
  props: {
    flopData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      dataMap: {
        tenant_total: {
          name: 'tenant_total',
          title: '租户总数',
          color: 'text-primary',
          unit: '户'
        },
        tenant_near: {
          name: 'tenant_near',
          title: '临近过期',
          color: 'text-deep-purple',
          unit: '户'
        },
        tenant_expire: {
          name: 'tenant_expire',
          title: '过期租户',
          color: 'text-pink',
          unit: '户'
        },
        user_total: {
          name: 'user_total',
          title: '用户总数',
          color: 'text-teal',
          unit: '人'
        },
        consumer_total: {
          name: 'consumer_total',
          title: '消费者总数',
          color: 'text-info',
          unit: '人'
        },
        spending: {
          name: 'spending',
          title: '消费总额',
          color: 'text-secondary',
          unit: '万元'
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  },
  watch: {
  }
});
</script>

<style lang="scss">
.subtitle {
  font-size: 0.8rem;
  height: 21px;
}
</style>
